<template>
  <div>
    <div :class="showmoreflag?'':'c-hh240 c-text-hidden'">
      <div class="c-flex-row c-hh100 c-aligni-center" :class="index + 1 == relatedList.length ? '' : 'c-mb30'" v-for="(item, index) in relatedList" :key="index" @click="goPackagedDetail(item.slaveProdType, item.slaveProdId, item.price)">
        <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
          <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{packagedType[item.slaveProdType]}}</div>
          <img :src="$addXossFilter(item.cover)" alt="">
        </div>
        <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-pt10 c-fs24 c-fw400">
          <span class="c-text-ellipsis2">{{item.name}}</span>
        </div>
        <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph20 c-hh36 c-lh c-br20 theme-bg-gradient">去学习</div>
      </div>
    </div>
    <div v-if="relatedList.length > 2" @click="showmore" class="c-fs20 c-fc-sblack c-textAlign-c c-pv16">{{showmoreflag?'收起列表':'查看更多'}} <span class="icon iconfont">&#xe836;</span></div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "RelatedItem",
  props: {
    relatedList: {
      type: Array,
      default: () => []
    },
    isBuy: {
      type: Number,
      default: 0
    },
    needPwd: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      packagedType: {
        110: "视频",
        111: "音频",
        112: "图文",
        9: "专栏",
        61: "知识套餐"
      },
      showmoreflag: false
    };
  },
  methods: {
    showmore() {
      this.showmoreflag = !this.showmoreflag
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    // 进入搭配学习
    goPackagedDetail(type, id, price) {
      if (this.isBuy == 0 && price * 1 > 0) {
        this.$showCjToast({
          text: '加入社群后可免费学习',
          type: 'warn',
          time: 1500
        });
      } else {
        let prodType = type == 110 || type == 111 || type == 112 ? global.ckFrom.course : type;
        let courseType = type == 111 ? 1 : type == 112 ? 2 : 0;
        let query = {
          ckFrom: global.ckFrom.social,
        }
        goDetails(this, prodType, id, query, courseType, 1);
      }
    },
  },
  activated() {
  }
};
</script>

<style scoped>
</style>
